

/*
 * @Autor: Mr Lu
 * @Version: 1.0
 * @Date: 2019-12-03
 * @LastEditors: OBKoro1
 * @LastEditTime: 2019-12-03
 * @Description:  历史记录
  
 */
<template>
  <div id="HistoryRecords" class="p-box">
    <div class="p-return" style="margin-bottom:0">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>历史记录
      </mu-appbar>
    </div>
    <div class="p-content" style="background: #fff;padding: 0.14rem">
      <!-- 新增的记录 -->
      <mu-card class="card-point">
        <mu-expansion-panel :expand="true">
          <div slot="header" style="width: 100%;">
            <div style="width: 100%; ">
              <div
                class="ly_flex ly_flex_just_between"
                style="padding: 0 14px;height: 0.39rem;line-height: 0.39rem;font-size:0.14rem"
              >
                <div>新增实测任务</div>
              </div>
              <mu-divider></mu-divider>
              <div class="sub-container">
                <div class="sub-box">
                  <span class="sub-title">操作时间：</span>
                  <span class="sub-content">{{taskObj.createdTime}}</span>
                </div>
                <div class="sub-box">
                  <span class="sub-title">操作人：</span>
                  <span class="sub-content">{{taskObj.createdUserName}}</span>
                </div>
              </div>
            </div>
          </div>
          <mu-container ref="container" class="lan-loadmore-content no-padding">
            <mu-form
              ref="form"
              :model="taskObj"
              class="mu-lan-form"
              :label-position="'left'"
              label-width=""
            >
              <mu-form-item label="项目名称">
                <mu-text-field
                  v-model="taskObj.projectName"
                  container="bottomSheet"
                  :readonly="true"
                ></mu-text-field>
              </mu-form-item>
              <mu-form-item label="区域">
                <mu-text-field v-model="taskObj.areaName" container="bottomSheet" :readonly="true"></mu-text-field>
              </mu-form-item>
              <mu-form-item label="责任单位">
                <mu-text-field v-model="taskObj.deptName" container="bottomSheet" :readonly="true"></mu-text-field>
              </mu-form-item>
              <mu-form-item label="平面图标记" class="form-between" style="box-shadow:none">
                <!-- <span class="flex ai-center">
                  <label style="margin-right:0.05rem">隐藏标号</label>
                  <mu-switch v-model="showFlag" @change="FlagChange"></mu-switch>
                </span>-->
              </mu-form-item>
              <div class="picture-area">
                <div class="map-container">
                  <MapShow
                    :enableClick="false"
                    :width="'100%'"
                    :url="taskObj.photoUrl"
                    v-model="taskObj.pointList"
                    :showPoint="true"
                    :readonly="true"
                  ></MapShow>
                </div>
              </div>
            </mu-form>
          </mu-container>
        </mu-expansion-panel>
      </mu-card>
      <div v-if="measureList.length">
        <mu-card class="card-point" v-for="(record, index) in measureList" :key="index">
          <mu-expansion-panel :expand="active == record.id" @change="toggle(record)">
            <div slot="header" style="width: 100%;">
              <div style="width: 100%; ">
                <div
                  class="ly_flex ly_flex_just_between"
                  style="padding: 0 14px;height: 0.39rem;line-height: 0.39rem;font-size:0.14rem"
                >
                  <div>提交测量结果</div>
                </div>
                <mu-divider></mu-divider>
                <div class="sub-container">
                  <div class="sub-box">
                    <span class="sub-title">提交时间：</span>
                    <span class="sub-content">{{record.createdTime}}</span>
                  </div>
                  <div class="sub-box">
                    <span class="sub-title">提交人：</span>
                    <span class="sub-content">{{record.createdUserName}}</span>
                  </div>
                </div>
              </div>
            </div>
            <mu-container ref="container" class="lan-loadmore-content no-padding">
              <mu-form
                ref="form"
                :model="record"
                class="mu-lan-form"
                :label-position="'left'"
                label-width=""
              >
                <mu-form-item label="责任单位">
                  <mu-text-field v-model="record.deptName" container="bottomSheet" :readonly="true"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="平面图标记" class="form-between" style="box-shadow:none"></mu-form-item>
                <div class="picture-area">
                  <div class="map-container" v-if="active == record.id">
                    <MapShow
                      :enableClick="false"
                      :width="'100%'"
                      :url="record.photoUrl"
                      v-model="record.pointList"
                      :showPoint="true"
                      :readonly="true"
                    ></MapShow>
                  </div>
                </div>
                <div class="tbox-container">
                  <div class="tDes">
                    <div class="tDesList flex wrap">
                      <div class="tDesList-item">实测点数：{{record.pointNum}}</div>
                      <div class="tDesList-item">实测次数：{{record.sumCount}}</div>
                      <div class="tDesList-item">合格次数：{{record.qualCount}}</div>
                      <div class="tDesList-item">合格率：{{record.prop}}%</div>
                    </div>
                  </div>
                  <div class="tbox" v-for="(item,index) in record.tableList" :key="index">
                    <div class="tbox-title">
                      <span style="margin-right:0.15rem">实测点位{{item.pIndex}}</span>
                      <span>实测次数：{{item.content.length}}</span>
                    </div>
                    <div class="tbox-content">
                      <table class="custom-table" style="border: 1px solid #E0E0E0">
                        <tr>
                          <th style="width: 1.07rem;">实测分项</th>
                          <th style="width: 1.1rem;">实测内容</th>
                          <th style="width: .8rem;">数值</th>
                          <th style="width: .8rem;">结果</th>
                        </tr>
                        <tr v-for="(td,tIndex) in item.content" :key="tIndex">
                          <!-- 实测分项 -->
                          <td style="width: 1.07rem;">{{td.subentryName}}</td>
                          <!-- 实测内容 -->
                          <td style="width: 1.1rem;">{{td.content}}</td>
                          <!-- 数值 -->
                          <td style="width: .8rem;">{{td.value}}</td>
                          <!-- 结果 -->
                          <td style="width: .8rem;">
                            <span v-if="td.result==1">合格</span>
                            <span v-if="td.result==0">不合格</span>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
                <mu-form-item label="参与人">
                  <mu-text-field v-model="record.joinUser" container="bottomSheet" :readonly="true"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="实测人">
                  <mu-text-field
                    v-model="record.createdUser"
                    container="bottomSheet"
                    :readonly="true"
                  ></mu-text-field>
                </mu-form-item>
                <mu-form-item label="实测时间">
                  <mu-text-field
                    v-model="record.createdTime"
                    container="bottomSheet"
                    :readonly="true"
                  ></mu-text-field>
                </mu-form-item>
                <mu-form-item label="现场照片" class="inline-item" style="padding-bottom:0.15rem;">
                  <div
                    v-for="(url,uIndex) in handurl(record.measureUrl)"
                    :key="uIndex"
                    class="img-box"
                  >
                    <img  :preview="uIndex" :src="url" />
                  </div>
                </mu-form-item>
                <mu-form-item label="抄送人" class="inline-item hasPadding">
                  <div class="userBox" style v-for="(user,uIndex) in record.copyList" :key="uIndex">
                    <div
                      class="ly_flex ly_flex_just_center ly_flex_ali_center add"
                    >{{user.userName.substr(0,1)}}</div>
                    <span>{{user.userName}}</span>
                  </div>
                </mu-form-item>
              </mu-form>
            </mu-container>
          </mu-expansion-panel>
        </mu-card>
      </div>
    </div>
    <ImgPreview
      :imgUrls="imgPreviewObj.list"
      :open="imgPreviewObj.show"
      @close="closeImageDialog"
      :slideIndex="imgPreviewObj.index"
    ></ImgPreview>
  </div>
</template>
<script>
import ImgPreview from "@/preview/ImgPreview.vue";
export default {
  name: "HistoryRecords",
  components: {
    ImgPreview
  },
  data() {
    return {
      loading: false,
      active: "",
      form: {},
      imgPreviewObj: {
        list: [],
        show: false,
        index: 0
      },
      taskObj: {
        createdUserName: "",
        projectName: "", //区域
        areaName: "", //区域
        deptName: "", //责任单位
        pointList: [],
        photoUrl: require("#/assets/img/default.png") //平面图
      },
      measureList: [
        // {
        //   id: "",
        //   deptName: "",
        //   joinUser: "", //参与人
        //   createdUser: "", //实测人
        //   createdTime: "",
        //   copyList: [], //抄送人
        //   createdUser: "131671", //测量人id
        //   createdUserName: "张昌波", //测量人名称
        //   pointNum: null, //实测点数
        //   qualCount: "3", //合格次数
        //   sumCount: "10", //测量次数
        //   prop: "30", //合格率
        //   measureUrl: "", //现场图片
        //   photoUrl: require("#/assets/img/default.png"),
        //   pointList: [],
        //   tableList: []
        // }
      ]
    };
  },
  watch: {},
  created() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.$A
        .Go("GET", "/safety/measureTask/historyList", {
          id: this.$route.query.taskId
        })
        .then(res => {
          this.$closeLoading();
          if (res.code == 200) {
            let preObj = res.body;
            /**
             *  Util.formatDate(
                new Date(preObj.endTime),
                "yyyy-MM-dd"
              ),
             */
            this.taskObj = {
              createdUserName: res.body.createdUserName,
              createdTime: res.body.createdTime,
              projectName: res.body.projectName, //区域
              areaName: res.body.areaName, //区域
              deptName: res.body.deptName, //责任单位
              photoUrl: res.body.photoUrl //平面图
            };
            let pointList = [];
            res.body.pointList.forEach(el => {
              pointList.push({
                left: el.split(",")[0],
                top: el.split(",")[1],
                lng: el.split(",")[0],
                lat: el.split(",")[1]
              });
            });
            this.taskObj.pointList = pointList;
            if (res.body.measureList) {
              this.getMeasureList(res.body.measureList);
            } else {
              this.measureList = [];
            }
          }
        });
    },

    //获取测量结果的列表
    getMeasureList(measureList) {
      measureList.forEach(item => {
        let obj = {};
        obj = {
          id: item.id,
          deptName: item.deptName,
          joinUser: item.joinUser, //参与人
          createdUser: item.createdUser, //任务创建人
          createdTime: item.createdTime, //任务创建时间
          copyList: item.copyList, //抄送人列表
          createdUserName: item.createdUserName,
          pointNum: item.pointNum, //实测点数
          qualCount: item.qualCount, //合格次数
          sumCount: item.sumCount, //测量次数
          prop: item.prop, //合格率
          measureUrl: item.measureUrl, //现场照片
          photoUrl: item.photoUrl, //平面图图片
          pointList: [],
          tableList: []
        };
        let pArray = [];
        let tArray = [];
        item.pointList.forEach((element, index) => {
          if (element) {
            let content = [];
            let left = element.split(",")[0];
            let top = element.split(",")[1];

            pArray.push({
              left: left,
              top: top,
              lng: left,
              lat: top
            });
            item.messageList.forEach(ms => {
              if (ms.point) {
                let point = ms.point.split(",");
                if (point[0] == left && point[1] == top) {
                  content.push(ms);
                }
              }
            });
            if (content.length) {
              tArray.push({
                pIndex: index + 1,
                content: content
              });
            }
          }
        });
        obj.pointList = pArray;
        obj.tableList = tArray;
        this.measureList.push(obj);
      });
    },
    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    //打开图片预览
    openImgLog(index, urlList) {
      let list = this.handurl(urlList);
      this.imgPreviewObj = {
        list: list,
        show: true,
        index: index
      };
    },
    //关闭图片预览
    closeImageDialog() {
      this.imgPreviewObj.show = false;
    },
    toggle(record) {
      this.active = record.id
    }
  }
};
</script>

<style lang="scss">
#HistoryRecords {
  .lan-nodata {
    height: 100%;
    background: #fff;
  }
  .img-box {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.1rem;
    position: relative;
    img {
      height: 100%;
      width: 100%;
    }
    .close {
      position: absolute;
      height: 0.2rem;
      width: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.18rem;
      top: 0.06rem;
      right: 0.06rem;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      background-color: #ff4242;
    }
  }
  .card-point {
    box-shadow: 0rem 0.02rem 0.08rem 0rem rgba(182, 182, 182, 0.4);
    border-radius: 0.04rem 0.04rem 0rem 0rem;
    margin-bottom: 0.14rem;
    .mu-expansion-panel {
      margin: 0.05rem 0;
      box-shadow: none;
    }
    .mu-expansion-panel-header {
      padding: 0;
    }
    .mu-divider {
      width: 100%;
    }
    .mu-expansion-toggle-btn.mu-button {
      position: absolute;
      right: 10px;
      top: 0.39rem;
    }
    .mu-expansion-panel__expand .mu-expansion-panel-header {
      border-bottom: 1px dashed #e0e0e0;
    }
    .mu-expansion-panel-content {
      padding: 0;
    }
    .imgTrigger {
      height: 0.75rem;
      width: 0.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .userTrigger {
      height: 0.75rem;
      width: 0.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #0080cb;
      .add {
        border-radius: 0.25rem;
        width: 0.5rem;
        height: 0.5rem;
        border: 0.01rem solid rgba(0, 128, 203, 1);
      }
    }
    .userBox {
      margin-top: 4px;
      position: relative;
      height: 0.75rem;
      width: 0.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #0080cb;
      border-radius: 0.02rem;
      overflow: hidden;
      color: rgba(61, 61, 61, 1);
      .add {
        border-radius: 0.25rem;
        width: 0.5rem;
        height: 0.5rem;
        font-size: 0.26rem;
        color: #fff;
        background: rgba(0, 128, 203, 1);
        border: 0.01rem solid rgba(0, 128, 203, 1);
      }
    }
  }
}
</style>